<template>
  <div>
    Computed

    <p>count is {{ count }}</p>
    <p>doubleCount is {{ doubleCount }}</p>
    <p><button @click="count++">+1</button></p>
    <hr />
    <p>
        this year is {{ age }}
        <p>
            next Year is <input type="text" v-model="nextAge"/>
        </p>
    </p>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const count = ref(1)

// getter 写法
// 这个就是简化写法，因为只有getter
const doubleCount = computed(() => count.value * 2)

// 完整的写法
const age = ref(20)
const nextAge = computed({
    // get 获取，相当于我们上面的简化写法
    get() {
        return age.value + 1
    },
    // set 改了最终的结果只，推出条件
    set(nextAge) {
        age.value = nextAge - 1
    }
})
</script>
